<template>
	<!-- 我的收货地址 -->
	<view class="ship-address">
		<view class="nav">
			<image @click="navToBack" src="/static/split-new/return2x.png" mode=""></image>
			<text style="margin-left: 30upx;font-size: 16px;">我的收货地址</text>
			<text style="margin-right: 50upx;font-size: 14px;" @click="address">新增</text>
		</view>
		<view v-if="exist">
			<view class="address">
			    <!-- 默认 -->
			   <view class="default-address" v-for="(item,index) in morenAddressList" :key="index" >
			      <view class="left">
			       <text class="iconfont">&#xe64b;</text>
			      </view>
			      <view class="right" @click="changeAddress(item)">
			        <view class="list-1">
			          <text class="name">{{item.name}}</text>
			          <text class="num">{{item.phone}}</text>
			        </view>
			        <view class="list-2">
			          {{item.province + item.city + item.district + item.address}}
			        </view>
			        <view class="list-3">
			          默认
			        </view>
			        <view class="list-4">
			          <text style="font-size: 24upx;padding-right: 15upx;" @click.stop="navTo(item)">编辑</text>
			        </view>
			      </view>
			    </view>
			    
			    <!-- 历史1 -->
			    <view class="item" v-for="(val,subs) in otherAddressList" :key="subs">
			      <view class="item-left">
			        <text class="iconfont">&#xe7ba;</text>
				  </view>
			      <view class="item-center" @click="changeAddress(val)">
			        <view class="list-1">
			          <text class="name">{{val.name}}</text>
			          <text class="num">{{val.phone}}</text>
			        </view>
			        <view class="list-2">
			         {{val.province + val.city + val.district + val.address}}
			        </view>
			      </view>
			      <view class="item-right" @click="navTo(val)">
			        <text>编辑</text>
			      </view>
			    </view>
			  </view>
		</view>
		
		<!-- 缺省页 start-->
		<view class="default-page" v-else>
			<image src="/static/imgs/defaultPage/address.png" mode="aspectFill"></image>
			<view>
				收藏夹空空如也，快去转转吧~
			</view>
			<view class="button">
				<button @click="navTo1">马上添加</button>
			</view>
		</view>
		<!-- 缺省页 end-->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				morenAddressList: [],
				otherAddressList: [],
				exist: true,
				position: '', // 判断是从哪个界面来的
			};
		},
		// 监听原生按钮的点击事件
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/set/addShipAddress',
			});
			
		},
		onLoad(option) {
			this.position = option.position;
			uni.setStorageSync('lph-address',this.morenAddressList);
		},
		onShow() {
			this.getAddress();
		},
		// 下拉刷新事件
		onPullDownRefresh() {
			this.getAddress();
		},
		methods:{
			address(){
				uni.navigateTo({
					url: '/pages/set/addShipAddress',
				});
			},
			changeAddress(item) { // 往缓存中存
				if(this.position == 1) {
					console.log(item);
					uni.setStorageSync('lph-address',item);
					uni.showToast({
						title: '选择成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack();
					},500)
					return;
				}
				// console.log(item);
				
			},
			// 编辑地址
			navTo(item){
				let item1 = JSON.stringify(item);
				uni.navigateTo({
					url: `/pages/set/editShipAddress?item=${item1}`
				})
			},
			navTo1(){
				uni.navigateTo({
					url: `/pages/set/addShipAddress`
				})
			},
			// 接口中的收货地址
			async getAddress() {
				var a = await this.$http.getShipAddress();
				uni.stopPullDownRefresh();
				a.data.length == 0 ? this.exist = false : this.exist = true;
				this.morenAddressList = a.data.slice(0,1) || [];
				this.otherAddressList = a.data.slice(1) || [];
			},
			navToBack(){
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
@import 'static/css/smallCommon.scss';
.nav{
	height: 128upx;
	width: 100%;
	padding-top: 66upx;
	background-color:#FF557D;
	display: flex;
	align-items: cneter;
	justify-content: space-between;
	color: #FFFFFF;
	image{
		margin-left: 30upx;
		margin-top: 10upx;
		width: 28upx;
		height: 38upx;
	}
	// &>text:first-of-type(1){
	// 	margin-left: 20upx;
	// }
	// &>text:last-child{
	// 	margin-right: 25upx;
	// }
}
</style>
